import React, { useState } from "react";

import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  ScrollView,
  Dimensions,
} from "react-native";
import { Feather } from "@expo/vector-icons";
import { Ionicons } from "@expo/vector-icons";

// 引入Dimensions库
const dimen = Dimensions.get("window");
const width = dimen.width;

const ScrollHead = ({ onSelect, onDelete, onAdd, initData }) => {
  const [currentPage, setPage] = useState(initData.initPage);
  // console.log(initData.headData);

  // // 监听滚动
  // const onAnimationEnd = (e) => {
  //   // 求出水平方向上的偏移量
  //   let offSetX = e.nativeEvent.contentOffset.x;
  //   // 计算当前页码
  //   // let currentPage = offSetX / width;
  //   // // 重新绘制UI
  //   // setPage(currentPage);
  //   // console.log(currentPage);
  // };

  return (
    <View>
      {/* 实例化ScrollView */}
      <ScrollView
        style={styles.scrollViewStyle}
        horizontal={true} // 水平方向
        showsHorizontalScrollIndicator={false} // 隐藏水平指示器
        // pagingEnabled={true} // 开启分页功能
        // onMomentumScrollEnd={onAnimationEnd} // 当一帧滚动完毕的时候的调用
      >
        {/* 实例化内部子视图 */}
        {initData.headData.map((item, index) => (
          <TouchableOpacity
            key={index}
            onPress={() => {
              onSelect(index);
              setPage(index);
            }}
          >
            <View style={styles.itemBtn}>
              {initData.showDelete ? (
                <View
                  style={{
                    position: "absolute",
                    zIndex: 5,
                    height: "100%",
                    justifyContent: "flex-start",
                    alignSelf: "flex-end",
                    // marginLeft: 55,
                    marginBottom: 100,
                    // backgroundColor: "blue",
                  }}
                >
                  <TouchableOpacity
                    onPress={() => {
                      onDelete(index);
                      setPage(currentPage - 1);
                    }}
                  >
                    <Ionicons
                      name="md-close-circle-outline"
                      size={15}
                      color="#888"
                      style={{ zIndex: 10, top: 7 }}
                    />
                  </TouchableOpacity>
                </View>
              ) : null}

              <Text
                style={[
                  styles.item,
                  currentPage == index ? styles.active : null,
                ]}
              >
                {item.type}
              </Text>
              <View
                style={[
                  styles.line,
                  currentPage == index ? styles.active2 : null,
                ]}
              ></View>
            </View>
          </TouchableOpacity>
        ))}
      </ScrollView>
      {initData.showPlus ? (
        <View style={styles.plus}>
          <TouchableOpacity
            // style={styles.plus}
            onPress={onAdd}
          >
            <Feather name="plus" size={28} />
          </TouchableOpacity>
        </View>
      ) : null}
    </View>
  );
};

const styles = StyleSheet.create({
  scrollViewStyle: {
    backgroundColor: "#dedede",
    height: 55,
    marginTop: 0,
  },
  itemBtn: {
    // paddingHorizontal: 12,
    width: 60,
    height: "100%",
    paddingTop: 2,
    flexDirection: "column",
    justifyContent: "center",
    alignItems: "center",
    paddingRight: 10,
    // backgroundColor: "red",
    marginRight: 2,
  },
  item: {
    marginLeft: 4,
    fontSize: 16,
    color: "#858385",
  },
  active: {
    fontSize: 17,
    marginTop: 10,
    color: "#1779bf",
  },
  line: {
    width: 35,
    height: 2,
    // backgroundColor: "#ccc",
    marginLeft: 6,
    // marginTop: 9,
    // marginBottom: 2,
  },
  active2: {
    marginTop: 11,
    backgroundColor: "#1779bf",
  },
  plus: {
    flexDirection: "row",
    justifyContent: "flex-end",
    position: "absolute",
    marginTop: 16,
    marginLeft: "80%",
  },
});

export default ScrollHead;
